<template :model="plan">
  <a-drawer :title="原材料预收单" width="60%" :bordered="false" placement="right" :closable="false" :visible="visible" @close="onClose">
    <div class="table-page-search-wrapper">
      <a-descriptions bordered>
        <a-descriptions-item label="产品名称" :span="2">
          {{ plan.Bom.Product.Name }}
        </a-descriptions-item>
        <a-descriptions-item label="产品规格" :span="2">
          {{ plan.Bom.Name }}
        </a-descriptions-item>
        <a-descriptions-item label="计划日期" :span="2">
          {{ moment(plan.PlanDate).format('yyyy-MM-DD') }}
        </a-descriptions-item>
        <a-descriptions-item label="计划数量" :span="2">
          {{ plan.Count }}
        </a-descriptions-item>
      </a-descriptions>
    </div>
    <div class="table-operator">
    </div>
    <s-table ref="table" size="default" rowKey="Id" :columns="columns" :data="loadData" :rowSelection="rowSelection" showPagination="auto">
    </s-table>
  </a-drawer>
</template>

<script>
import moment from 'moment'
import { STable } from '@/components'
import MainSvc from '@/api/Exec/PrecollectedSvc'

const columns = [
  { title: '物料编码', dataIndex: 'MaterieCode', sorter: true },
  { title: '物料名称', dataIndex: 'MaterieName', sorter: true },
  { title: '规格编码', dataIndex: 'SpecCode', sorter: true },
  { title: '规格名称', dataIndex: 'SpecName', sorter: true },
  { title: '预收数量', dataIndex: 'Quantity', sorter: true },
  { title: '实收数量', dataIndex: 'RealIncome', sorter: true }
]

export default {
  components: {
    STable,
    MainSvc
  },
  data() {
    this.columns = columns
    return {
      // create model
      visible: false,
      confirmLoading: false,
      mdl: null,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: { planId: '', Keyword: '' },
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        var _query = Object.assign({}, { ...this.queryParam })
        for (const key in _query) {
          if (moment.isMoment(_query[key])) {
            _query[key] = _query[key].format('YYYY-MM-DD')
          }
        }
        const requestParameters = Object.assign({ sortField: 'ModifyTime', sortOrder: 'asc', Search: _query }, parameter)
        console.log('loadData request parameters:', requestParameters)
        return MainSvc.GetPage(requestParameters)
      },
      selectedRowKeys: [],
      selectedRows: [],
      plan: { id: '' }
    }
  },
  filters: {
  },
  created() {},
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange
      }
    }
  },
  methods: {
    moment,
    openDrawer(record) {
        this.visible = true
        this.plan = record
        this.resetSearchForm()
        this.$refs.table.refresh()
    },
    onClose() {
        this.visible = false
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    resetSearchForm() {
      this.queryParam = { planId: this.plan.Id, Keyword: '' }
    }
  }
}
</script>
